<template>
	<el-row  v-loading='loading' element-loading-text="拼命加载中">
		
		<!--  搜索操作区 -->
	    <el-row class="pb10  little-header">
	          <el-col  :xs='24' :sm='20' :md='17' :lg='14'  >
	                <div class=' w-100 ' align='left'>
	                		<!-- <el-select v-model="search.type" placeholder="请选择"  class='w140'>
	          							    <el-option
	          							      v-for="item in typedata"
	          							      :key="item.value"
	          							      :label="item.label"
	          							      :value="item.value">
	          							    </el-option>
	          					</el-select> -->
	                    <el-input  placeholder='请输入名称' v-model.trim='search.name' style='width:28%'  @focus='focusinput($event)'  @blur = 'blurinput($event)'></el-input>
	                    <el-button icon="el-icon-search" type='primary' @click='pageInit()'>搜索</el-button>
	                </div>
	          </el-col>
	          <el-col  :xs='23' :sm='1' :md='5' :lg='8'  :offset='1' >  
	                <div align="right">
	                </div>
	          </el-col>
	         
	    </el-row>
	    
	    <el-row class='pb10 text-left' >
	    	  <el-button  v-if='permit.add'  type="primary"  size="small" round  plain  @click='newFileList()'>新建文件夹</el-button>
			  <el-button type="primary" icon="el-icon-plus" size="small" round  @click="addFiles"  class='mb16'>添加</el-button>
	    </el-row>
	    <el-row class='mb20 mt12'>
	    	  <el-breadcrumb separator-class="el-icon-arrow-right">
					  <el-breadcrumb-item  v-for='(item,index) in navarr' :key='index' >
					  		<a href="javascript:void(0)"  @click='jump(item.dirCode,item.name,index)'>{{item.name}}</a>
					  </el-breadcrumb-item>
			  </el-breadcrumb>
	    </el-row>
	    <!-- table -->
	    <el-table border  :data="tableList"   :cell-class-name='hover'  @cell-click='checkUser' >
	        	 
	          <el-table-column prop="name"            label="名称"     align="center" >
	          		<template slot-scope='list'  @click='openDetail(list.row)'>
	          			<i  v-if='list.row.isDir=="1"'  class='icon icon-filefolder  align-text-top' ></i>
	          			<i  v-if='list.row.isDir=="0"'  class='icon icon-file  align-text-top'></i>
	                      {{list.row.name}}
	                </template>
	          </el-table-column>
	          <el-table-column prop="prjType"            label="类型"     align="center" >
	                <template slot-scope='list'>
	                      {{list.row.prjType | project_type}}
	                </template>
	          </el-table-column>
	          <el-table-column prop="entMemberType"            label="状态"     align="center"  >
	                <template slot-scope="scope">
	                      {{scope.row.entMemberType | entMember}}
	                </template>
	          </el-table-column>
	          <el-table-column prop="modifyTime"      label="更新时间"     align="center"  >
	                <template slot-scope="scope">
	                      {{scope.row.modifyTime | formatDate}}
	                </template>
	          </el-table-column>
	          <el-table-column prop="cretaeUserName"  label="创建人"       align="center"  ></el-table-column>
	          <el-table-column                        label="操作"          align="center"  width="300">
	                  <template v-slot="list">
	                          <el-button  v-if='permit.download'  type="primary" size="mini" round @click="downloadFile(list.row.fileCode)"  :disabled='list.row.isDir=="1"'>下载</el-button>
	                          <span  v-if='permit.rename'></span>
	                          			<el-button    type="primary" size="mini" round @click="FolderRename(list.$index, list.row)" v-if='list.row.isDir=="1"'  :disabled='list.row.name=="立项申请文件模版"'>	
	                          		   重命名
	                          			</el-button>
	                          			<el-button  type="primary" size="mini" round @click="FileRename(list.$index, list.row)" v-else>重命名</el-button>
	                          </span>
	                          <span  v-if='permit.delete'>
	                          			<el-button type="danger"  size="mini" round @click="FolderDelete(list.$index, list.row)"  v-if='list.row.isDir=="1"'  :disabled='list.row.name=="立项申请文件模版"'>删除</el-button>
	                          			<el-button type="danger"  size="mini" round @click="FileDelete(list.$index, list.row)"  v-else>删除</el-button>
	                          </span>
	                          
	                  </template>
	          </el-table-column>
	    </el-table>
	    <!-- 分页 -->
	    <el-pagination class='mt28'
	            background
	            @size-change="handleSizeChange"
	            @current-change="handleCurrentChange"
	            :current-page="1"
	            :page-sizes="[10, 20]"
	            :page-size="10"
	            :pager-count="5"
	            layout="total, sizes, prev, pager, next, jumper"
	            :total="Total">
	    </el-pagination>
	    <!-- 组件 -->
	    <!-- 新建文件夹 -->
	    <NewFileJia  ref='NewFileJia'  v-on:save-finished='addNewList(arguments)'></NewFileJia>
	    <!-- 新增 文件 -->
        <FileEdit ref='addFile'  v-on:save='recept(arguments)'> </FileEdit>
	</el-row>
</template>

<script >
/*interface*/
import { contractList,saveFile_folder,saveFile,modify_folder,modify_file,deleteFolder,deleteFile,DetailFile }  from  '@/api/professional_work/contract/index'/*合同*/
import { getpdfcode }  from '@/api/common/file'/*pdf文件预览*/
/*component*/ 
import  NewFileJia  from  '@/components/professional_work/contract/index'/*新建文件夹*/
import FileEdit  from '@/components/common/FileEdit'/*文件上传*/
/*state*/
import { mapGetters } from 'vuex'

export default {
	name: 'contract',
	data(){
		return {
			/*static*/
			loading:false,
			typedata:[
				{label:'类型',value:''},
				{label:'默认',value:'1'},
				{label:'个人',value:'2'},
			],
			company_state:[
				{label:'状态',value:''},
				{label:'可用',value:'1'},
				{label:'审批中',value:'2'},
				{label:'审批失败',value:'3'},
				{label:'未提审',value:'4'},
			],
			/*当前用户允许权限*/
		    permit:{
		          check:false,//查看详情
		          //增删改
		          delete:false,
		          add:false,
		          edit:false,
		          upfile:false,

		          //提审 复制 查看历史
		          rename:false,
		          download:false,
		    },

			/*active*/
			//查询条件
			search:{
				name:this.Global.ie_nine == true ? '请输入名称':'',/*placeholder 兼容ie9 △*/
				dirCode:'',
				limit:10,
				currentPage:1,
			},
			search_place_str:'请输入名称',//placeholder输入内容 placeholder 兼容ie9 △
			//文件夹导航
			navarr:[],

			tableList:[],
			Total:null,
			
			//文件上传请求地址
      		actionAddress:process.env.BASE_API+'/op/fileupload/upload_file',
		}
	},
	created(){
		//初始化 文件目录 列表
		this.search.dirCode = 'root'
		this.initPath('root','根目录')
    	this.pageInit()
    	this.jurisdiction()//初始化按钮权限操作
  	},
	methods:{
		//********初始化********
		pageInit(){
	        /*placeholder 兼容ie9 △*/
	        if(this.search.name == this.search_place_str){
	            this.search.name = ''
	        }
	      	contractList(this.search).then(res=>{
		      	if(res.data.flag == true){
			        this.tableList = res.data.dataList
			        this.Total=res.data.totalRs
			        /*placeholder 兼容ie9 △*/
	                if(this.search.name == ''){
	                    this.search.name = this.Global.ie_nine == true ? this.search_place_str:''
	                }
		      	} 
		    })
		    .catch(error => {
	            console.log(error)
	        })
	    },
	    //文件夹 面包屑导航
	    initPath(dirCode,name){
	    	this.navarr.push({name,dirCode})
	    },
	    //初始化按钮权限操作 20400
	    jurisdiction(){
	        
	        this.permit.check = this.button_limit.find(item => {
	          return item.id === 20402
	        })
	        this.permit.add = this.button_limit.find(item => {
	          return item.id === 20403
	        })
	        this.permit.upfile = this.button_limit.find(item => {
	          return item.id === 20404
	        })
	        this.permit.rename = this.button_limit.find(item => {
	          return item.id === 20405 
	        })
	        this.permit.download = this.button_limit.find(item => {
	          return item.id === 20407 
	        })
	        this.permit.delete = this.button_limit.find(item => {
	          return item.id === 20408
	        })
	        this.permit.edit = this.button_limit.find(item => {
	          return item.id === 20409
	        })
	    },

	    //********列表操作********
		//新建文件夹
		newFileList(){
			this.$refs.NewFileJia.$emit('openDialog')
		},
		
		//接收文件名称后  common 接收三个参数 【form（code，name），新增/编辑状态，文件夹/文件重命名】
		addNewList(arg){
			// console.log(arg)
			let data = arg[0]
			let isEdit = arg[1]

			if(isEdit == false){
				//新建文件夹
				saveFile_folder(data,this.search.dirCode).then(res=>{
					if(res.data.flag == true){
							this.$message({type:'success',message:res.data.msg})
							this.pageInit()
					}
					
				})	
			}
			else{
				if(arg[2] == 'folder'){
					//修改文件夹
					
						modify_folder(data).then(res=>{
							if(res.data.flag == true){
								this.$message({type:'success',message:res.data.msg})
								this.pageInit()
							}
						})
					
				}
				else{
					//修改文件名称
					modify_file(data).then(res=>{
						if(res.data.flag == true){
							this.$message({type:'success',message:res.data.msg})
							this.pageInit()
						}
					})
				}
				
			}
			
		},
		//文件夹重命名
		FolderRename(index,row){
			this.$refs.NewFileJia.$emit('openEditDialog',row.name,row.code,'folder')
		},

		//新增文件
	    addFiles(){
	        this.$refs.addFile.$emit('openDialog')
	    },
	    //接收已经上传的文件，并返回列表
	    recept(arg){
	        let  form = arg[0] 

	        form.forEach((item,index)=>{
	          // this.filelist.push({fileName:item.name,fileCode:item.code})
			          saveFile(item.code,item.name,this.search.dirCode).then(res=>{
		      		 	if(res.data.flag == true){
			      		 	// this.$message({type:'success',message:res.data.msg})
			      		 	this.pageInit()
			      		 }
		      		 })
	        })
	       
	          
	    },
		//文件重命名
		FileRename(index,row){
			this.$refs.NewFileJia.$emit('openEditDialog',row.name,row.code,'file')
		},
		
		
		//删除文件夹 
		FolderDelete(index,row){
			
    		this.$confirm('确定删除该文件夹？', '提示', {
	            confirmButtonText: '确定',
	            cancelButtonText: '取消',
	            type: 'warning'
	        })
	        .then(() => {
				deleteFolder(row.code).then(res=>{
					if(res.data.flag == true){
						this.$message({type:'success',message:res.data.msg})
						this.pageInit()
					}
				})
			})
        	 
			
		},
		//删除文件
		FileDelete(index,row){
			
    		this.$confirm('确定删除该文件？', '提示', {
	            confirmButtonText: '确定',
	            cancelButtonText: '取消',
	            type: 'warning'
	        })
	        .then(() => {
				deleteFile(row.code).then(res=>{
					if(res.data.flag == true){
						this.$message({type:'success',message:res.data.msg})
						this.pageInit()
					}
				})
			})
        	
		},
		//面包屑导航 跳转(回跳)
		jump(code,name,index){
			// console.log(index)
			this.search.dirCode = code
			this.navarr.splice(index+1)
			this.pageInit()
		},
		
	
      	//文件上传成功之后的回调  保存文件
      	handleSuccess(response, file, fileList){
      		console.log(response)
      		 saveFile(response.data.code,response.data.name,this.search.dirCode).then(res=>{
      		 	if(res.data.flag == true){
	      		 	this.$message({type:'success',message:res.data.msg})
	      		 	this.pageInit()
	      		 }
      		 })
      	},

      	/*placeholder 兼容ie9 focus-blur △*/
	    focusinput(e,str){
	        if(this.Global.ie_nine == true){
	            this.search.name = this.search.name == this.search_place_str ? '':this.search.name
	        }
	    },
	    blurinput(e,str){
	        if(this.Global.ie_nine == true){
	            let val = e.srcElement.value//ie9下只能用这个值
	            this.search.name = val == '' ? this.search_place_str:val
	        }
	    },
		hover({row, column, rowIndex, columnIndex}){
	    //console.log(row, column, rowIndex, columnIndex)
	    //设置表格第一列的特殊样式  该样式需要在APP 或者 public.css设置
	      if(columnIndex == 0  && this.permit.check){
	      		// if(row.isDir == '1'){
			        return 'activeCol'
			    // }
	      }
	    },
	    //点击表格第一列  查看详情
	    checkUser(row, column, cell, event){
	    	console.log(row)
	    	if(column.label == '名称' &&  this.permit.check){
	    			if(row.isDir == '1'){
		        		this.search.dirCode = row.code
		        		this.initPath(row.code,row.name)
						this.pageInit()
	        		}
	        		if(row.isDir == '0'){
	        			/*预览文件*/
	            		// getpdfcode(row.fileCode)
	            		let pdfStr = row.name.search(/pdf/ig)
						if(pdfStr !=-1){
							/*pdf文档*/
							window.open('download_file?fileCode='+row.fileCode+'&token='+sessionStorage.getItem('tokenId')+'&isRead=1')
						}
						else {
							//doc文档
							getpdfcode(row.fileCode)
						}
	        		}
	    	}
	        
	    },

	    //导出
	    handleExport(){

	    },
	    //
	    /*每页显示条数变化 事件触发
	     *@method 方法名
	     *@for 所属类名
	     *@param{val} 共几条
	     *@return {} 
	    */
	    handleSizeChange(val) {
	      this.search.limit = val;
	      this.pageInit()
	    },
	    /*页数变化 事件触发
	     *@method 方法名
	     *@for 所属类名
	     *@param{val} 第几页
	     *@return {} 
	    */
	    handleCurrentChange(val) {
	      this.search.currentPage = val
	      this.pageInit()
	    },

	},
	components:{
		NewFileJia,
     	FileEdit,
     
	},
	computed:{
	    ...mapGetters(['button_limit'])
	  },
}
</script>

<style type="text/css" scoped>
.icon{width: 16px;height: 16px;}
.icon-filefolder{background: url('../../assets/images/img/public/icon-filefolder.png') no-repeat;}
.icon-file{background: url('../../assets/images/img/public/icon-file.png') no-repeat;}
</style>